<template>
    <qh-page-view :title="title">
         <view class="search-box">
              <view class="search-content flex-cn">
                   <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
                   <input class="search-input" type="text" :focus="isFocus" v-model="searchForm.search" placeholder="请输入商品名称" placeholder-class="pl" @confirm="searchData" />
                   <view class="search-btn flex-cn-cn" @click="searchData">搜索</view>
              </view>
         </view>
         <view class="flex-column-100">
              <scroll-view scroll-y="true" class="scroll-view" :show-scrollbar="false" @scrolltolower="getGoodsList" refresher-enabled @refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh" refresher-background="transparent">
                   <view class="scroll-view-content">
                         <!-- 商品列表搜索 VIP4-->
                         <view class="goods-list-box  flex-spb flex-wrap">
                              <waterfallsFlow ref="WaterfallRef" @updateSKU="generateSKU"   :searchName="searchForm.search" :wfList="goodsList" :updateNum="searchForm.page"  ></waterfallsFlow>
                                   <view class="flex-cn-cn" style="width: 100%;height: 60rpx;">
						
								<view v-if="canLoad && isLoading" class="bottom-message flex-cn-cn">加载中...</view>
								<view v-if="!canLoad && !isLoading" class="flex-cn-cn bottom-message" >
									<view class="line"></view>
									<text class="mar_l_10 mar_r_10">没有更多了</text>
									<view class="line"></view>
								</view>
							</view>
                              <!-- <view v-for="(item, index) in goodsList" :key="index" @click="toDetail(item.id)">
                              <view class="animationIcon">
                              <view v-for="animation in animations" :key="animation.id">
                                   <view v-if="animation.active && animationIndex === index" :class="{
                                             innerRight: index % 2 === 0,
                                             inner: index % 2 !== 0,
                                        }">
                                                                      <view :class="{
                                             baltRight: index % 2 === 0,
                                             balt: index % 2 !== 0,
                                        }"></view>
                                   </view>
                              </view>
                              </view>

                              <view class="goods-item flex-col-spb">
                              <view>
                                   <view>

                                   <view style="position: relative;">
                                             
                                        <qh-goods-image :src="item.goods_image" size="355"
                                        radius="16rpx 16rpx 0 0"></qh-goods-image>
                                        <view class="goods-name font_icon">
                                        {{ item.goods_name }}
                                        </view>
                                   <view v-if="item.goods_num <= 0 "  class="class-goods-img">已售空</view>
                                   </view>
                                   <view class="tag-container">
                                        <template >
                                        <text  class="tag" style="color: #9e9e9e; font-size: 20rpx;margin-left: 16rpx;">  {{ item.subheading }}</text>
                                        </template>
                                   </view>
                                   
                                   <view v-if="!item.goods_num <= 0 "  style="display: flex;align-content: center; margin-top: 8rpx;margin-left: 16rpx;">
                                        <view class="preferentialCalss" v-if="item.goods_num <= 10">
                                        <text style="color: #FF3A3A;font-size: 20rpx;">仅剩{{ item.goods_num }}件</text>
                                        </view>
                                        <ProgressBar :progressMargin="0"  :progressType="1"  :coupon="item.coupon_name"/> 
                                   </view>
                                   <ProgressBar :progressType="0" :progress="goodsNum(item.goods_num,item.more_num)"  v-if="goodsNum(item.goods_num,item.more_num) !== null && (item.goods_num > 10 && goodsNum(item.goods_num,item.more_num)  > 1) "/>
                         
                                   </view>

                                   <view style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        margin-top: 28rpx;
                                   " @click.stop="() => { }">
                                   <view class="goods-price-box">
                                        <view v-if="showPlusPrice(item)" class="flex-cn">
                                        <text class="plus-price-color">￥{{ item.plus_price }}</text>
                                        <text class="plus-price-icon">PLUS</text>
                                        </view>
                                        <view v-if="showVipPrice(item)" class="flex-cn">
                                        <text class="price-color">￥{{ item.shop_mem_price }}</text>
                                        <text class="vip-price-icon">VIP</text>
                                        </view>
                                        <view v-if="showOnlinePrice(item)" style="
                                        font-family: '.PingFang SC-Regular', Arial,
                                             sans-serif;
                                        font-weight: bold;
                                        color: #FF730A;
                                        font-size: 28rpx;
                                        ">￥{{ item.online_price }}</view>
                                   </view>
                                   <div style="
                                        display: flex;
                                        justify-content: flex-end;
                                        width: 326rpx;
                                        height: 60rpx;
                                        ">
                                        <view class="container">
                                        <view    v-if="item.num > 0"  class="button-container" style="display: flex">
                                        <view :disabled="item.num === 0 || item.num < 0" @click="reduceShopping(item, index)"
                                             class="roundBtn icontext" :class="buttonClass(item)
                                                            ? 'hidden'
                                                            : 'visible-in'
                                                       " style="
                                             display: flex;
                                             justify-content: center;
                                             align-items: center;
                                             ">
                                             <text style="color: #FFB73F; font-size: 24rpx"
                                             class="icontext qh-rt-single qh-rt-a-zu4424 car-num-icon"
                                             :class="{ rotate: item.num === 0 }"></text>
                                        </view>
                                        <view   v-if="item.num > 0"   style="
                                             width: 40rpx;
                                             display: flex;
                                             align-items: center;
                                             justify-content: center;
                                             ">
                                             <view style="font-size: 20rpx">{{
                                                            item.num
                                                       }}</view>
                                        </view>
                                        <view class="roundBtn roundBtnBack" @click="addShopping(item, index)"
                                             style="flex: 1; margin-right: 10rpx">
                                             <text style="color: #fff; font-size: 24rpx"
                                             class="icontext qh-rt-single qh-rt-a-zu4423 car-num-icon"
                                             :class="{ rotate: item.num > 0 }"></text>
                                        </view>
                                        </view>
                                        <view  v-if="item.num === 0"  >
                                        <img @click="addShopping(item, index)" style="
                                             margin-right: 16rpx;
                                             width: 56rpx;
                                             height: 56rpx;
                                             "
                                             src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8cec859721757.png" />
                                        </view>
                                        </view>
                                   </div>

                                   </view>
                              </view>
                              </view>
                              </view> -->
                  </view>
                   </view>
              </scroll-view>
         </view>

         <shopping-pushpins></shopping-pushpins>
         <!-- 选择规格弹窗 -->
         <block v-if="showSelectSku">
              <choose-sku :sku="sku" :goodsinfo="goods" goodsType="1" @close="closeSku"></choose-sku>
         </block>

         <SkuDetailsCard 
          ref="popupComponent"
          :goodsinfo="goods"
          :BoxStyle="1"
           ></SkuDetailsCard>

    </qh-page-view>
</template>

<script>
const app = getApp().globalData;
import SkuDetailsCard from '@/components/skuDetails/skuDetails.vue'
export default {
     components: {
          SkuDetailsCard,
     },
    data () {
         return {
               goodsChecked: [],
              animations: [],
              animationIndex: null,
              indexes: [],
              isFocus: false,
              title: "",
              goodsList: [],
              isRefresh: false,
              isLoading: false,
              canLoad: true,
              searchForm: {
                   search: "",
                   person1: "",
                   person2: "",
                   person3: "",
                   page: 1,
                   limit: 10,
              },
              showSelectSku: false,
              goods: {},
              sku: {},
         };
    },
    /**
     * @param {Object} options
     * name		分类名称
     * type		分类级别  1、2、3 不传默认为1
     * id		分类id
     */
    async onLoad (options) {
         await this.$onLaunched;
         if (options.search == 1) {
              this.$nextTick(() => {
                   this.isFocus = true;
              });
              this.title = "搜索商品";
         } else {
              this.title = options.name ? options.name : "商品列表";
              if (options.id) {
                   switch (options.type) {
                        case "2":
                             this.searchForm.person2 = options.id;
                             break;
                        case "3":
                             this.searchForm.person3 = options.id;
                             break;
                        default:
                             this.searchForm.person1 = options.id;
                             break;
                   }
              }
              this.searchData();
         }
    },

    onShow (){
          if(this.$refs.WaterfallRef) {
               this.$refs.WaterfallRef.upDate()
          }
    },
    methods: {

     generateSKU(val){
      if(val.attribute_state == 2){  //SKU的
        this.$refs.popupComponent.handlerApply()
       
        val.skuDetailList.forEach(item => {
          const goodsNum = parseInt(item.goods_num);
            item.disabled = goodsNum <= 0;
          });
          this.goods = val
      }
    },

     goodsNum(goods_num, more_num ) {
        let result = 0;
        if (goods_num > 10) {
            if (more_num === 0) {
                result = 100; // 当more_num为0时，返回100%
            } else {
                result = goods_num / more_num;
                if (result <= 1) {
                    result = Math.round(result * 100); 
                }
            }
        }

        return result;
    },
         buttonClass (item) {
              if (item.num === 0) {
                   return true;
              }
              if (item.count > 0) {
                   return false;
              }
         },
         //查看商品详情
         toDetail (id) {
              uni.navigateTo({
                   url: "/pages/mer/goods/details/details?id=" + id,
              });
         },
         //下拉刷新
         async pullDownRefresh () {
              this.isRefresh = true;
              await this.searchData();
              this.isRefresh = false;
         },
         async searchData () {
              this.canLoad = true;
              this.isLoading = false;
              this.searchForm.page = 1;
              await this.getGoodsList();
         },
         //关闭规格弹窗
         closeSku () {
              this.showSelectSku = false;
         },
         //添加商品到购物车
         async addToCar (index) {
              if (this.goodsList[index].attribute == 2) {
                   this.goods = {
                        ...this.goodsList[index],
                        goods_image: this.goodsList[index].path,
                        goods_num: 999,
                   };
                   this.showSelectSku = true;
              } else {
                   const res = await this.$mutations.setShoppingCar(
                        {
                             goods_id: this.goodsList[index].goods_id,
                             num: 1,
                        },
                        1
                   );
                   if (res) {
                        this.showSelectSku = false;
                   }
              }
         },
         //点击搜索
         search () {
              uni.navigateTo({
                   url: "../product/productList/productList?type=1",
              });
         },
         //获取商品
         getGoodsList () {
              return new Promise(async (resolve) => {
                   if (this.isLoading || !this.canLoad) return resolve(false);
                   this.isLoading = true;
                   this.searchForm = Object.assign(this.searchForm , {store_id:this.$store.mallStoreId })
                   const { status, data, goods,message } = await this.$request(
                        "SmallProgramApi/Goods/goodsStatic_v1",
                        this.searchForm
                   );

                   if (this.firstLoad) {
                         this.firstLoad = false;
                    }
                   if (status != 1)
                        return (
                             uni.showToast({
                                  title: message,
                                  icon: "none",
                             }) && resolve(false)
                        );
                   if (this.searchForm.page == 1) {
                        this.goodsList = goods;
                   } else {
                        this.goodsList.push.apply(this.goodsList, goods);
                        
                   }

                   if (!goods.length) {
                         this.canLoad = false;
                    }

                   this.searchForm.page++;
                   this.goodsList.forEach((item) => {
                    let matchedItem = this.$store.merShoppingGoodsList.find(
                              (el) => el.goods_id === item.id
                         );
                         if (matchedItem) {
                              item.num = matchedItem.num;
                         } else {
                              item.num = 0;
                         }
                    });
                        this.isLoading = false;
                        resolve(true);
              });
         },



    },
};
</script>



<style lang="scss">
.bottom-message {
		color: #ccc;
		font-size: 24rpx;
		// background-color: #fff;
		width: 100%;
		padding: 10rpx 0;
	}

	.line {
		width: 40%;
		height: 1px;
		background-color: #ccc;
	}



.search-box {
    height: 88rpx;
    padding: 12rpx 24rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
    z-index: 1;

    .search-content {
         height: 100%;
         width: 100%;
         padding: 0 0 0 24rpx;
         border: 2rpx solid var(--primary-color);
         border-radius: 34rpx;
         box-sizing: border-box;
         background-color: #ffffff;

         .search-icon {
              font-size: 28rpx;
              color: #999999;
         }

         .search-input {
              flex: 1;
              font-size: 28rpx;
              line-height: 48rpx;
              color: #333333;
              margin: 0 10rpx;
              height: 48rpx;
         }

         .search-btn {
              width: 124rpx;
              height: 100%;
              font-size: 28rpx;
              color: #ffffff;
              text-align: center;
              line-height: 48rpx;
              background-color: var(--primary-color);
              border-radius: 32rpx;
              margin-right: -1rpx;
         }
    }
}

.scroll-view {
//     background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
background: #F0F2EE;
}


</style>
